<template>
	<view style="position: relative; overflow: hidden;">
		<view class="box" :class="isStart?'start':''" :style="'transform: rotate('+deg+'deg)'">
			<view class="box_item" v-for="item in data" :key='item.id'>
				{{item.name}}
			</view>
		</view>
		<view class="active" @click="active">
			开始
		</view>
	</view>
</template>

<script>
	import {getRandomNum_AB,GL} from '../../utils/index.js'
	export default {
		data() {
			return {
				data:[
					{id:1,name:''},
					{id:2,name:''},
					{id:3,name:''},
					{id:4,name:''},
					{id:5,name:''},
					{id:6,name:''},
					{id:7,name:''},
					{id:8,name:''}
				],
				deg:22.5,
				isStart:false,
				flag:0
			};
		},
		onLoad() {
			let arr = ['一等奖','谢谢参与','二等奖','谢谢参与','三等奖','谢谢参与','四等奖','谢谢参与']
			this.data.forEach((item,index)=>{
				item.name=arr[index]
			})
		},
		methods:{
			active(){
				if(this.isStart) return
				this.isStart=true
				// this.flag=getRandomNum_AB(1,8)
				// 随机生成 1 ~ 9 之间的数(不包含9) 
				let gl = new GL({
				    min: 1,
				    max: 9,
				    fenpei: new Map([
				        [1, 0.25],  
				        [3, 0.25],
				        [5, 0.25], 
				        [7, 0.25],
				    ])
				});
				this.flag=gl.random()
				
				// 指定奖项
				this.start(this.flag)
			},
			start(n){
				// 获取旋转角度
				let deg = 1080-(45*n)+22.5
				this.deg += deg
				setTimeout(()=>{
					this.isStart=false
					 let title = this.data[this.flag-1].name
					uni.showModal({
					    title: '提示',
					    content: title,
					    success:  (res)=> {
							this.deg= 22.5
					      //   if (res.confirm) {
					      //       console.log('用户点击确定');
							    // this.deg= 21
					      //   } else if (res.cancel) {
					      //       console.log('用户点击取消');
					      //   }
					    }
					});
				},3200)
			}
		}
	}
</script>

<style lang="less" scoped>
	.active{
		position: absolute;
		top: 50%;
		left: 50%;
		width: 150rpx;
		height: 150rpx;
		background-color: #DD524D;
		transform: translate(-50%,-50%);
		line-height: 150rpx;
		text-align: center;
		border-radius: 50%;
		color: #fff;
		&::before{
			content: '';
			width: 0;
			height: 0;
			border-left: 30rpx solid transparent;
			border-right: 30rpx solid transparent;
			border-bottom: 60rpx solid #DD524D;	
			position: absolute;
			top: -40rpx;
			left: 50%;
			transform: translateX(-50%);
		}
		
	}
	.start{
		transition: all 3.5s cubic-bezier(0.09, 0.99, 0.72, 1);
	}
	.box{
		position: relative;
		background-color: #007AFF;
		width: 700rpx;
		height: 700rpx;
		border-radius: 50%;
		margin: 50rpx auto;
		overflow: hidden;
		border: 1px solid #007AFF;
		.box_item{
			&::after{
				position: absolute;
				content: '';
				height: 100%;
				width: 2rpx;
				right: 0;
				// transform: translateX(50%);
				background-color: #FFFFFF;
				transform-origin: 50% 50%;
				transform: rotate(22.5deg) translateX(5%);
			}
			position: absolute;
			top: 0;
			left: 275rpx;
			width: 150rpx;
			height: 350rpx;
			// background-color: #4CD964;
			transform-origin: 50% 100%;
			text-align: center;
			line-height: 140rpx;
			&:nth-child(2){
				transform: rotate(45deg);
			}
			&:nth-child(3){
				transform: rotate(90deg);
			}
			&:nth-child(4){
				transform: rotate(135deg);
			}
			&:nth-child(5){
				transform: rotate(180deg);
			}
			&:nth-child(6){
				transform: rotate(225deg);
			}
			&:nth-child(7){
				transform: rotate(270deg);
			}
			&:nth-child(8){
				transform: rotate(315deg);
			}
			
		}
	}
	
</style>
